﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>
    <!-- 自动添加ECharts到全局 -->
    <script src="./publicJs/echarts.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>

    <title>服务器资源管理</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <!-- 首行按钮和搜索框 -->
        <el-row :gutter="10">
          <!-- <el-col style="text-align: left">
            <el-button type="success" @click="buttonClick.addBtnClick('D')">新建部门</el-button>
            <el-button type="success" @click="buttonClick.addBtnClick('E')">新建职员</el-button>
            <el-button type="primary" @click="buttonClick.openBtnClick(3)">打开</el-button>
            <el-button type="danger" @click="buttonClick.deleteBtnClick()">删除部门</el-button>
            <el-input style="display: inline; margin: 0px 12px" v-model="tableDatas.filters.searchText">
              <template #prepend>搜索</template>
            </el-input>
          </el-col> -->
        </el-row>
        <!-- 弹框 -->
        <!-- <el-dialog v-model="dialogDatas.dialogFormVisible" :title="dialogDatas.isNew ? '添加':'修改'" top="5vh">
          <el-scrollbar max-height="70vh">
            <el-form :model="dialogDatas.currentData">
              <el-form-item v-for="item in dialogDatas.formItems" :label="item.label">
                <div v-if="item.isDate">
                  <el-date-picker
                    v-model="dialogDatas.currentData[item.value]"
                    :type="item.dateOption ? item.dateOption.type : 'date'"
                    :format="item.dateOption ? item.dateOption.format : 'YYYY/MM/DD'"
                    :value-format="item.dateOption ? item.dateOption.valueFormat : 'YYYY/MM/DD'"
                    :date-format="item.dateOption ? item.dateOption.dateFormat : ''"
                    :time-format="item.dateOption ? item.dateOption.timeFormat : ''"
                  />
                </div>

                <div v-else-if="item.isSwitch">
                  <el-switch
                    v-model="dialogDatas.currentData[item.value]"
                    inline-prompt
                    active-text="启用"
                    inactive-text="不启用"
                    :active-value="item.trueValue"
                    :inactive-value="item.falseValue"
                  />
                </div>
                <div v-else-if="item.isSelect" style="width: 100%">
                  <el-select v-model="dialogDatas.currentData[item.value]" :disabled="item.disable" filterable>
                    <el-option
                      v-for="item in item.selectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div v-else style="width: 100%">
                  <el-input v-model="dialogDatas.currentData[item.value]" :disabled="item.disable" />
                </div>
              </el-form-item>
            </el-form>
          </el-scrollbar>

          <template #footer>
            <span>
              <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogDatas.confirmBtnClick"> 确定 </el-button>
            </span>
          </template>
        </el-dialog> -->
        <!-- 主界面 -->
        <el-row :gutter="10" class="marginTop10">
          <!-- 部门选择 -->
          <el-col :span="6">
            <el-card shadow="never" style="text-align: center">
              <div>172.18.59.193</div>
              <div id="172.18.59.193_C" style="width: 100%; height: 25vh"></div>
              <div id="172.18.59.193_M" style="width: 100%; height: 25vh"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="never" style="text-align: center">
              <div>192.168.100.28</div>
              <div id="192.168.100.28_C" style="width: 100%; height: 25vh"></div>
              <div id="192.168.100.28_M" style="width: 100%; height: 25vh"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="never" style="text-align: center">
              <div>192.168.100.29</div>
              <div id="192.168.100.29_C" style="width: 100%; height: 25vh"></div>
              <div id="192.168.100.29_M" style="width: 100%; height: 25vh"></div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="never" style="text-align: center">
              <div>192.168.101.246</div>
              <div id="192.168.101.246_C" style="width: 100%; height: 25vh"></div>
              <div id="192.168.101.246_M" style="width: 100%; height: 25vh"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="marginTop10">
          <!-- 部门人员展示 -->
          <el-col :span="24">
            <el-table :data="tableDatas.tableDatasAfterPage" max-height="90vh" stripe border empty-text="无数据">
              <el-table-column
                v-for="column in tableDatas.tableColumns"
                :type="column.type"
                :prop="column.prop"
                :label="column.label"
                :align="column.align"
                :width="column.width"
              >
                <template #default="scope" v-if="column.prop =='使用率 %'">
                  <div>
                    <el-progress type="dashboard" :percentage="scope.row['使用率 %']" />
                  </div>
                </template>

                <template #default="scope" v-if="column.prop =='operate'">
                  <div>
                    <el-button type="success" @click="tableDatas.editBtnClick(scope.row)">修改</el-button>
                    <el-popconfirm
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      title="确定删除该条记录?"
                      @confirm="tableDatas.deleteBtnClick(scope.row)"
                    >
                      <template #reference>
                        <el-button type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <el-pagination
      class="marginTop10"
      @size-change="tableDatas.filters.handleSizeChange"
      @current-change="tableDatas.filters.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.filters.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination> -->
          </el-col>
        </el-row>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import myAxios193 from './myAxios/myAxios193.js'
    import { showWarning } from './hooks/useMyMessageBox.js'
    import useMyXlsx from './hooks/useMyXlsx.js'
    import v4 from './publicJs/uuidv4.js'

    const { createApp, ref, reactive, computed, onMounted, watch } = Vue
    const app = createApp({
      name: 'EmployeeAndDepartmentView',
      setup() {
        // console.log('echarts :>> ', echarts)
        // onMounted(() => {})

        let setEchartOptions = function ({ ip, cpuIdle, cpuTotal, freemem, totalmem }) {
          let myChart_C = echarts.init(document.getElementById(ip + '_C'))
          let rateC = (cpuTotal - cpuIdle) / cpuTotal
          // 指定图表的配置项和数据
          let option_C = {
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return `${params.data.name}:${params.data.value}`
              },
            },
            title: {
              text: 'CPU使用率\n' + (rateC * 100).toFixed(2) + '%',
              left: 'center',
              top: 'center',
            },
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: cpuIdle,
                    name: 'CPU空闲',
                    itemStyle: {
                      color: 'rgba(145, 204, 117, 0.5)',
                    },
                  },
                  {
                    value: cpuTotal - cpuIdle,
                    name: 'CPU占用',
                    itemStyle: {
                      color: 'rgba(145, 204, 117, 1)',
                    },
                  },
                ],
                radius: ['50%', '70%'],
              },
            ],
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart_C.setOption(option_C)

          let myChart_M = echarts.init(document.getElementById(ip + '_M'))
          let rateM = (totalmem - freemem) / totalmem
          // 指定图表的配置项和数据
          let option_M = {
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return `${params.data.name}:${params.data.value}`
              },
            },
            title: {
              text: '内存使用率\n' + (rateM * 100).toFixed(2) + '%',
              left: 'center',
              top: 'center',
            },
            series: [
              {
                type: 'pie',
                // 饼图从右边开始画,所以要倒着写
                data: [
                  {
                    value: freemem,
                    name: '内存空闲',
                    itemStyle: {
                      color: 'rgba(84, 112, 198, 0.5)',
                    },
                    label: '123',
                  },
                  {
                    value: totalmem - freemem,
                    name: '内存占用',
                    itemStyle: {
                      color: 'rgba(84, 112, 198, 1)',
                    },
                  },
                ],
                radius: ['50%', '70%'],
              },
            ],
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart_M.setOption(option_M)
        }

        let loading = ref(false)
        let addBtnClick = function (EMP_CLASS) {
          let row = {
            EMPLOYEEID: v4(),
            EMP_CLASS: EMP_CLASS,
            EMP_NAME: '',
            EMP_NOTES: '',
            EMP_DEPARTMENT: EMP_CLASS == 'E' ? tableDatas.filters.department : '',
            EMP_TYPE: EMP_CLASS == 'E' ? 'A' : '',
            isNew: true,
          }
          showFormDialog(row)
        }
        let deleteBtnClick = function () {
          if (tableDatas.oritableData.length) {
            showWarning('部门下仍有职员，请先删除职员')
            return
          } else {
            if (tableDatas.filters.department) {
              let row = {
                EMPLOYEEID: tableDatas.filters.department,
                EMP_CLASS: 'D',
              }
              tableDatas.deleteBtnClick(row)
            }
          }
          // showFormDialog();
        }
        let buttonClick = {
          addBtnClick,
          deleteBtnClick,
        }

        let showFormDialog = function (row) {
          if (row.EMP_CLASS == 'D') {
            dialogDatas.formItems = dialogDatas.departFormItems
          } else if (row.EMP_CLASS == 'E') {
            dialogDatas.formItems = dialogDatas.empFormItems
          }
          if (!row.isNew) {
            dialogDatas.isNew = false
            dialogDatas.currentData = { ...row }
            let EMP_ID_Form_Item = dialogDatas.formItems.find((item) => item.value == 'EMP_ID')
            EMP_ID_Form_Item.disable = true
          } else {
            dialogDatas.isNew = true
            dialogDatas.currentData = { ...row }
            let EMP_ID_Form_Item = dialogDatas.formItems.find((item) => item.value == 'EMP_ID')
            EMP_ID_Form_Item.disable = false
          }
          dialogDatas.dialogFormVisible = true
        }

        let dialogDatas = reactive({
          dialogFormVisible: false,
          currentData: {},
          isNew: false,
          formItems: [],
          departFormItems: [
            // {
            //   "value": "EMPLOYEEID",
            //   "label": "员工编号",
            //   "isDate": false,
            //   "disable":true,
            // },
            {
              value: 'EMP_ID',
              label: '部门编号',
              isDate: false,
              disable: false,
            },
            {
              value: 'EMP_NAME',
              label: '部门名称',
              isDate: false,
              disable: false,
            },
            {
              value: 'EMP_NOTES',
              label: '备注',
              isDate: false,
              disable: false,
            },
            // {
            //   "value": "EMP_DEPARTMENT",
            //   "label": "部门",
            //   "isDate": false,
            //   "disable": false,
            //   "isSelect": true,
            //   "selectOptions": computed(() => {
            //     return tableDatas.oriDepartmentData.map(item => {
            //       return {
            //         value: item['EMPLOYEEID'],
            //         label: item['EMP_NAME'],
            //       };
            //     });
            //   }),
            // },
            // {
            //   "value": "EMP_CLASS",
            //   "label": "类型  D 部门  E 员工",
            //   "isDate": false,
            //   "disable":true,
            // },
            // {
            //   "value": "EMP_TYPE",
            //   "label": "类型",
            //   "isDate": false,
            //   "disable": false,
            //   "isSelect": true,
            //   "selectOptions": [
            //     {
            //       value: 'A',
            //       label: '正式员工',

            //     },
            //     {
            //       value: 'T',
            //       label: '临时员工',
            //     },
            //   ],
            // },
            // {
            //   "value": "DataVersion",
            //   "label": "版本号",
            //   "isDate": false,
            //   "disable":true,
            // },
            // {
            //   "value": "DEP_LEADER",
            //   "label": "部门领导",
            //   "isDate": false,
            //   "disable":true,
            // },
          ],
          empFormItems: [
            // {
            //   "value": "EMPLOYEEID",
            //   "label": "员工编号",
            //   "isDate": false,
            //   "disable":true,
            // },
            {
              value: 'EMP_ID',
              label: '员工编号',
              isDate: false,
              disable: false,
            },
            {
              value: 'EMP_NAME',
              label: '员工姓名',
              isDate: false,
              disable: false,
            },
            {
              value: 'EMP_NOTES',
              label: '备注',
              isDate: false,
              disable: false,
            },
            {
              value: 'EMP_DEPARTMENT',
              label: '部门',
              isDate: false,
              disable: false,
              isSelect: true,
              selectOptions: computed(() => {
                return tableDatas.oriDepartmentData.map((item) => {
                  return {
                    value: item['EMPLOYEEID'],
                    label: item['EMP_NAME'],
                  }
                })
              }),
            },
            // {
            //   "value": "EMP_CLASS",
            //   "label": "类型  D 部门  E 员工",
            //   "isDate": false,
            //   "disable":true,
            // },
            {
              value: 'EMP_TYPE',
              label: '类型',
              isDate: false,
              disable: false,
              isSelect: true,
              selectOptions: [
                {
                  value: 'A',
                  label: '正式员工',
                },
                {
                  value: 'T',
                  label: '临时员工',
                },
              ],
            },
            // {
            //   "value": "DataVersion",
            //   "label": "版本号",
            //   "isDate": false,
            //   "disable":true,
            // },
            // {
            //   "value": "DEP_LEADER",
            //   "label": "部门领导",
            //   "isDate": false,
            //   "disable":true,
            // },
            // {
            //   "value": "DATE_TIME",
            //   "label": "精确到秒的时间(示例,可删除)",
            //   "isDate": true,
            //   "dateOption": {
            //     "type": "datetime",
            //     "format": "YYYY/MM/DD HH:mm:ss",
            //     "dateFormat": "YYYY/MM/DD",
            //     "timeFormat": "HH:mm:ss",
            //     "valueFormat": "YYYY/MM/DD HH:mm:ss"
            //   },
            //   "disable":true,
            // },
          ],
          confirmBtnClick: function () {
            loading.value = true

            let EMPLOYEEID = dialogDatas.currentData.EMPLOYEEID
            if (!EMPLOYEEID) {
              EMPLOYEEID = v4()
            }
            let EMP_CLASS = dialogDatas.currentData.EMP_CLASS
            if (!EMP_CLASS) {
              showWarning('类型不能为空')
              return
            }
            let isPass = dialogDatas.checkData(dialogDatas.currentData)
            if (!isPass) {
              return
            }

            let DataVersion = dialogDatas.currentData.DataVersion ? dialogDatas.currentData.DataVersion++ : 1
            let params =
              `${EMPLOYEEID}` +
              `🈹${dialogDatas.currentData.EMP_ID}` +
              `🈹${dialogDatas.currentData.EMP_NAME}` +
              `🈹${dialogDatas.currentData.EMP_NOTES}` +
              `🈹${dialogDatas.currentData.EMP_DEPARTMENT}` +
              `🈹${dialogDatas.currentData.EMP_CLASS}` +
              `🈹${dialogDatas.currentData.EMP_TYPE}` +
              `🈹${DataVersion}` +
              `🈹${dialogDatas.currentData.DEP_LEADER}`

            let databaseAccount = 'P100140'
            params += `🈹${databaseAccount}`

            myAxios
              .post('WEB_MES_添加或修改人员信息', params)
              .then((res) => {
                if (res.includes('成功')) {
                  loading.value = false
                  dialogDatas.dialogFormVisible = false
                  // ElMessage({
                  //   showClose: true,
                  //   type: 'success',
                  //   message: '提交成功!' + res
                  // });
                  if (dialogDatas.currentData.EMP_CLASS == 'E') {
                    getTableDatas(dialogDatas.currentData.EMP_DEPARTMENT)
                  } else {
                    getTableDatas()
                  }
                } else {
                  loading.value = false
                  showWarning('更新失败res!' + res)
                }
              })
              .catch((err) => {
                loading.value = false
                showWarning('更新失败err!' + err)
              })
          },
          checkData: function (row) {
            let EMP_ID = row.EMP_ID
            if (!EMP_ID) {
              showWarning('编号不能为空')
              return false
            }
            let EMP_NAME = row.EMP_NAME
            if (!EMP_NAME) {
              showWarning('名称不能为空')
              return false
            }
            // let EMP_NOTES = row.EMP_NOTES;
            // if (!EMP_NOTES) {
            //   showWarning('备注不能为空');
            //   return false;
            // }
            let EMP_CLASS = row.EMP_CLASS
            if (EMP_CLASS == 'E') {
              let EMP_DEPARTMENT = row.EMP_DEPARTMENT
              if (!EMP_DEPARTMENT) {
                showWarning('部门不能为空')
                return false
              }
              let EMP_TYPE = row.EMP_TYPE
              if (!EMP_TYPE) {
                showWarning('类型不能为空')
                return false
              }
            }
            return true
          },
          cancelBtnClick: function () {},
        })

        let getTableDatas = async function (department) {
          loading.value = true
          // if (!department) {
          //   let databaseAccount = 'P100140'
          //   let params = `${databaseAccount}`

          //   tableDatas.oriDepartmentData = await myAxios.get('WEB_MES_获取部门信息', params)
          //   tableDatas.filters.department = tableDatas.oriDepartmentData[0]['EMPLOYEEID']
          // } else {
          //   tableDatas.filters.department = department
          // }
          let params = `${tableDatas.filters.department}`
          let databaseAccount = 'P100140'
          params += `🈹${databaseAccount}`

          myAxios193
            .get('/users/getSystemInfo', params)
            .then((res) => {
              if (res instanceof Array) {
                loading.value = false
                tableDatas.oritableData = [...res[4]]
                setEchartOptions(res[0])
                setEchartOptions(res[1])
                setEchartOptions(res[2])
                setEchartOptions(res[3])
                // ElMessage({
                //   showClose: true,
                //   type: 'success',
                //   message: '最新数据获取成功!'
                // });
              } else {
                loading.value = false
                showWarning('获取数据失败res!' + res)
              }
            })
            .catch((err) => {
              loading.value = false
              showWarning('获取数据失败err!' + err)
            })
        }

        onMounted(() => {
          getTableDatas()
          setInterval(() => {
            getTableDatas()
          }, 10 * 1000)
        })

        let tableDatas = reactive({
          //表格筛选展示相关代码
          filters: {
            searchText: '',
            department: '',

            //表格翻页相关代码
            currentPage: 1,
            pagesize: 10,
            handleSizeChange(val) {
              tableDatas.filters.pagesize = val
            },
            handleCurrentChange(val) {
              tableDatas.filters.currentPage = val
            },
          },
          tableDatasAfterFilter: computed(() => {
            let fData = tableDatas.oritableData

            if (tableDatas.filters.searchText) {
              let searchText = tableDatas.filters.searchText
              let searchKeys = ['EMP_ID', 'EMP_NAME', 'EMP_NOTES']
              fData = fData.filter((item) => {
                return searchKeys.some((key) => {
                  return String(item[key]).toLowerCase().includes(searchText.toLowerCase())
                })
              })
            }

            return fData
          }),
          tableDatasAfterPage: computed(() => {
            let fData = tableDatas.tableDatasAfterFilter
            // fData = fData.slice((tableDatas.filters.currentPage - 1) * tableDatas.filters.pagesize, tableDatas.filters.currentPage * tableDatas.filters.pagesize);
            return fData
          }),

          tableColumns: [
            {
              type: 'index',
              prop: '',
              label: '序号',
              align: 'center',
              width: 60,
            },
            {
              prop: '表空间名',
              label: '表空间名',
              align: 'center',
              width: 120,
            },
            {
              prop: '表空间大小(G)',
              label: '表空间大小(G)',
              align: 'center',
              // width: 200,
            },
            {
              prop: '表空间剩余大小(G)',
              label: '表空间剩余大小(G)',
              align: 'center',
              // width: 200,
            },
            {
              prop: '表空间使用大小(G)',
              label: '表空间使用大小(G)',
              align: 'center',
              // width: 200,
            },
            {
              prop: '使用率 %',
              label: '使用率 %',
              align: 'center',
              width: 150,
            },
            // {
            //   "prop": "DEP_LEADER",
            //   "label": "部门领导",
            //   "align": "center",
            //   "width": 120,
            // },
            // {
            //   prop: 'operate',
            //   label: '操作',
            //   align: 'center',
            //   width: 170,
            // },
          ],
          oritableData: [],
          oriDepartmentData: [],
          editBtnClick: function (row) {
            showFormDialog(row)
          },
          deleteBtnClick: function (row) {
            loading.value = true

            let params = `${row['EMPLOYEEID']}`

            let databaseAccount = 'P100140'
            params += `🈹${databaseAccount}`

            myAxios
              .post('WEB_MES_删除人员/部门信息', params)
              .then((res) => {
                if (res.includes('成功')) {
                  loading.value = false
                  dialogDatas.dialogFormVisible = false
                  ElMessage({
                    showClose: true,
                    type: 'success',
                    message: '删除成功!' + res,
                  })
                  // 删除部门
                  if (row['EMP_CLASS'] == 'D') {
                    let index = tableDatas.oriDepartmentData.findIndex(
                      (item) => item['EMPLOYEEID'] == row['EMPLOYEEID'],
                    )
                    tableDatas.oriDepartmentData.splice(index, 1)
                    tableDatas.filters.department = tableDatas.oriDepartmentData[index]['EMPLOYEEID']
                  }
                  // 删除员工
                  else if (row['EMP_CLASS'] == 'E') {
                    tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1)
                  }
                } else {
                  loading.value = false
                  showWarning('删除失败res!' + res)
                }
              })
              .catch((err) => {
                loading.value = false
                showWarning('删除失败err!' + err)
              })
          },
        })

        watch(
          () => tableDatas.filters.department,
          (newVal, oldVal) => {
            getTableDatas(newVal)
          },
        )

        return {
          loading,
          buttonClick,
          dialogDatas,
          tableDatas,
        }
      },
    })
    //应用vue（就是挂载在上面ID绑定的元素上）
    app.use(ElementPlus)

    app.mount('#app')
  </script>
</html>
<style>
  .marginTop10 {
    margin-top: 10px;
  }
</style>
